{% extends "app/base_site.html" %}

{% block title %} 登录 {% endblock title %}

{% block stylesheets %}
  {{ block.super }}
  <!-- Animate.css -->
  <link href="/static/vendors/animate.css/animate.min.css" rel="stylesheet">

<style>
#verify-code {
    float: right;;
    display: block;
    width: 90px;
    height: 34px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

    border: 1px solid #adadad;
    cursor: pointer;
    margin-bottom: 10px;

}
</style>
{% endblock stylesheets %}

{% block body_class %}login{% endblock body_class %}

{% block body %}
  <div>
    <a class="hiddenanchor" id="signup"></a>
    <a class="hiddenanchor" id="signin"></a>

    <div class="login_wrapper">
      <div class="animate form login_form">
        <section class="login_content">
          <form>
            <h1>{{ settings.name }}</h1>

            <div>
              <input type="text" name="username" class="form-control" placeholder="用户名" required />
            </div>

            <div>
              <input type="password" name="password" class="form-control" placeholder="密码" required />
            </div>

            <!--
             <div>
                 <img id="verify-code" src="/getVerifyCode?action=login" alt="验证码">
            </div>

            <div>
               <input type="text" name="verify_code" value="0000" class="form-control" placeholder="验证码" required />
            </div>
            -->

            <div>
              <a class="btn btn-default submit" style="margin-left: 5px;" href="javascript:login();">登录</a>
              <!--<a class="reset_pass" href="#">Lost your password?</a>-->
            </div>

            <div class="clearfix"></div>

            <div class="separator">
              <!--<p class="change_link">New to site?</p>-->

              <div class="clearfix"></div>

              <div>
                <p>@2024-2025</p>
              </div>
            </div>
          </form>
        </section>
      </div>
    </div>
  </div>

{% block javascripts %}
  {{ block.super }}
    <script>
    let eleUsername = $("input[name='username']");
    let elePassword = $("input[name='password']");
    let eleVerifyCode = $("input[name='verify_code']");

    let is_logining = false;

    $('#verify-code').click(function () {
        $(this)[0].src +="&";
    });
    document.onkeydown = function (e) { // 回车提交表单
    // 兼容FF和IE和Opera
        let theEvent = window.event || e;
        let code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code === 13) {
            login();
        }
    }
    function login() {
        if(is_logining){
            return false;
        }
        let username = eleUsername.val().trim();
        let password = elePassword.val().trim();

        if(username.length < 3){
            myAlert("用户名格式不正确","error");
            return false;
        }
        if(password.length < 3){
            myAlert("密码格式不正确","error");
            return false;
        }
        /*
        if(!validate_password(password)){
            myAlert("密码格式不正确","error");
            return false;
        }

        let verify_code = eleVerifyCode.val().trim();
        if(verify_code.length !== 4){
            myAlert("验证码格式不正确!","error");
            return false;
        }*/
        is_logining = true;
        $.ajax({
            url: '/login',
            type: "post",
            async: true,
            data: {username:username,password:password},
            dataType: "json",
            timeout: 0,
            error: function () {
                myAlert("网络异常，请确定网络正常！", "error");
                is_logining = false;
            },
            success: function (res) {

                if(1000===res.code){
                    window.location.href = "/";
                }else{
                    myAlert(res.msg,"error",1000);
                    setTimeout(function () {
                        is_logining = false;
                    }, 1000);
                }
            }
        });
    }
    function validate_email(val) {
    return val.match(/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/) != null;
    }
    function validate_tel(val) {
        return val.match(/^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/) != null;
    }
    function validate_password(val) {
        return val.match(/^[\w_-]{6,16}$/) != null;
    }
    </script>

{% endblock javascripts %}
{% endblock body %}

